<template>
    <div>
        <div class="ct" :style="'opacity:'+this.opacity">
            <router-link to="/">
                <div class="back iconfont icon-fanhui"></div>
            </router-link>
            {{sightName}}
        </div>
        <router-link to="/" class="circle">
            <div class="iconfont icon-fanhui"></div>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "Head",
        props:{
            sightName: String
        },
        activated(){
            window.addEventListener('scroll', this.scroll)
        },
        deactivated(){
            window.removeEventListener('scroll', this.scroll)
        },
        methods:{
            scroll(){
                var y=document.documentElement.scrollTop
                var opa=y/140;
                opa=opa>1?1:opa;
                this.opacity=opa;
                console.log('y='+y+';opa='+opa)
            }
        },
        data(){
            return{
                opacity:0
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@styles/variables.styl"
    .ct
        z-index:1
        position: fixed
        top: 0
        left:0
        right:0
        color: #fff
        background-color: $bgColor_head
        height: $lineHeight
        line-height: $lineHeight
        font-size: ($lineHeight*0.325)
        text-align: center
        .back
            float:left
            color:white
            padding-left:.2rem
    .circle
        z-index:2
        position: absolute
        left: .4rem
        top: .4rem
        width: .8rem
        height: .8rem
        line-height: .8rem
        border-radius: .4rem
        background-color: rgba(0, 0, 0, .8)
        color: #fff
        text-align: center
</style>